import { use, Suspense } from "react";
import PropTypes from "prop-types";
// 数据获取

//定义一个异步函数用于获取用户的数据
async function fetchUserData(userId) {
  //向接口发起get请求获取用户的数据
  const response = await fetch(`http://localhost:3000/user/${userId}`);
  //把响应的响应体转成JSON格式对象
  return response.json();
}
function UserProfile({ user }) {
  const data = use(user);
  return (
    <div>
      <p>name:{data.name}</p>
      <p>email:{data.email}</p>
    </div>
  );
}
UserProfile.propTypes = {
  user: PropTypes.object.isRequired,
};
function App() {
  //调用fetchUserData方法获取ID为100的用户对应的用户详情

  // user 是个 promise 对象
  const user = fetchUserData(100);
  return (
    <Suspense fallback={<p>loading...</p>}>
      <UserProfile user={user} />
    </Suspense>
  );
}
export default App;
//异步调用接口获取返回的数据进行渲染
